<template>
  <div class="container">
    <div class="top">
      <img :src="base_url+'/mp_3.0/bg.png'"
           alt=""
           v-if="base_url"
           class="img"
           mode="widthFix">
      <div class="logo">
        <img :src="base_url+'/mp_3.0/logo.png'"
             v-if="base_url"
             alt=""
             class="logo-icon">
      </div>
    </div>
    <div class="title">
      美美咖+
    </div>

    <div class="btn-bar">
      <button class="login-btn"
              open-type="getUserInfo"
              @getuserinfo="get_info">
        立即登录
      </button>
      <div class="back-btn"
           @tap.stop="back()">
        暂不登录
      </div>
    </div>
  </div>

</template>


<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      base_url: common.image_resource,
      code: "",
      u_id: "",
      login_data: {},
      jump_url: "",
      title: "",
      s_data: {},
    };
  },
  methods: {
    get_info (e) {
      let that = this;
      wx.getStorage({
        key: 'user_token',
        success: () => {
          // 已登陆
          // 判断有没有绑定手机号  没有就去绑定
        },
        fail: () => {
          // 未登录
          wx.showLoading({
            title: '', //提示的内容,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
          common.fly_post(
            "api/v4_2/minapp/login",
            {
              code: that.login_data.code,
              iv: e.mp.detail.iv,
              encryptedData: e.mp.detail.encryptedData,
              avatarUrl: e.mp.detail.userInfo.avatarUrl,
              nickName: e.mp.detail.userInfo.nickName,
              source: that.s_data.d || 0
            },
            response => {
              let res = response.data;
              wx.hideLoading();
              if (res.status_code == 0) {
                //   登录成功了
                //绑定手机号弹出获取手机号弹框
                wx.setStorageSync("open_id", res.data.user_jwt)
                if (res.data.status == 1) {
                  // 未绑定手机号  跳转绑定手机号
                  wx.redirectTo({ url: `/pages/package_main/login_bindtel/main?user_jwt=${res.data.user_jwt}&source=${res.data.source}` });
                } else {
                  // 绑定了手机号  显示手机号  确认登录
                  wx.redirectTo({ url: `/pages/package_main/login_showtel/main?user_jwt=${res.data.user_jwt}&tel=${res.data.phone}&source=${res.data.source}` });
                }
              } else {
                wx.showToast({
                  title: res.message,
                  icon: "none",
                  duration: 2000,
                  mask: false
                });
              }
            }
          );
          //   code失效  重新获取
          this.get_logincode()
        },
        complete: () => { }
      })
    },
    get_logincode () {
      wx.login({
        success: res => {
          this.login_data = res
        },
        fail: () => {
          wx.showToast({
            title: '登录失败', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        },
        complete: () => { }
      });
    },
    band_user () {
      let that = this
      if (wx.getStorageSync('s_data')) {
        common.fly_post(
          "api/v4_2/user/share",
          {
            type: this.s_data.t,
            sid: this.s_data.sid,
            d: this.s_data.d
          },
          response => {
            wx.navigateBack({
              delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
          }
        );
      }

    },
    back () {
      wx.navigateBack({
        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "美美咖"
    });
    wx.setNavigationBarColor({
      frontColor: '#ffffff', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: 'FB6C88', //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
  },
  onShow () {
    // wx.removeStorage({
    //   key: 'user_token',
    //   success: res => { }
    // });
    this.s_data = wx.getStorageSync('s_data') || {}
    this.get_logincode()
  }
};
</script>

<style lang="less" scoped>
.container {
  .top {
    width: 100%;
    position: relative;
    .img {
      width: 100%;
      display: block;
    }
    .logo {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 34px 0px rgba(233, 60, 80, 0.23);
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
      .logo-icon {
        width: 111px;
        height: 111px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .title {
    font-size: 24px;
    font-family: "PingFangSC-Medium", "PingFangSC";
    font-weight: 500;
    color: rgba(255, 56, 62, 1);
    line-height: 30px;
    margin-top: 85px;
    text-align: center;
  }

  .btn-bar {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    .login-btn {
      width: 255px;
      height: 50px;
      background: linear-gradient(
        45deg,
        rgba(228, 0, 98, 1) 0%,
        rgba(240, 139, 56, 1) 89%
      );
      box-shadow: 0px 2px 10px 0px rgba(234, 72, 76, 1);
      border-radius: 8px;
      font-size: 18px;
      font-family: "PingFangSC-Medium", "PingFangSC";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 50px;
      text-align: center;
    }
    .back-btn {
      width: 255px;
      height: 50px;
      background: rgba(241, 241, 241, 1);
      border-radius: 8px;
      font-size: 18px;
      font-family: "PingFangSC-Regular", "PingFangSC";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 50px;
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
